<template>
  <div class="product-box">
    <div class="product-header">
        <slot name="media"></slot>
    </div>
    <div class="product-main">
        <slot name="content"></slot>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss">
    .product-box{
        margin: 10px;
        display: flex;
        flex-direction: column;
        width: 220px;
        height: 200px;
        background-color: #ccc;
        .product-header{
            height: 140px;
            overflow: hidden;
        }
        .product-main{
            flex-grow: 1;

        }

    }
</style>